<template>
  <BottomDrawer
    :visible="addVisible"
    
    :title=" '供应商'"
    :width="450"
    @close="addVisible = false"
  >
    <div style="padding: 10px;">
        <div class="details">
          <div class="details_title">供应商</div>
          <div class="details_text">{{formData.supplyName}}</div>
        </div>
         <div class="details">
          <div  class="details_title">联系人</div>
          <div class="details_text">{{formData.managerName}}</div>
        </div>
         <div class="details">
          <div  class="details_title">联系电话</div>
          <div class="details_text">{{formData.managerPhone}}</div>
        </div>
         <div class="details">
          <div  class="details_title">联系地址</div>
          <div class="details_text">{{province}}{{city}}{{county}}{{formData.address}}</div>
        </div>
            
    </div>
  </BottomDrawer>
</template>

<script setup lang="ts">
import type { RoleForm, RoleQuery } from '@/types/role';
import type { FormRules, ElTree } from 'element-plus';
import type { SupplyInfo, SupplyTable ,SupplyForm } from '@/types/supply';
import {addStorage,updateSupply} from '@/api/supply/index'
import stores from '@/store';
const useBaseData = stores.useBaseDataStore();

// 获取序列列表
const emit = defineEmits(['closeDrawer']);
const pageForm = ref();
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
watch(filterText, (val) => {
  treeRef.value!.filter(val);
});
const province = ref('')
const city = ref('')
const county = ref('')
// const listdept = ref([])
defineExpose<{
  open: (menu:SupplyInfo) => void;
}>({
  open: (menu:SupplyInfo) => {
    formData.value = menu
    addVisible.value = true;


    let res:any = getCascaderOptions()
    let cityList = []
    let countyList = []

    for (let index = 0; index < res.length; index++) {
      let item = res[index];
      if(item && menu.province){
        if(Number(item.id) == Number(menu.province)){
          province.value = item.name
          cityList = item.children
        }
      }
    }

    for (let index = 0; index < cityList.length; index++) {
      let item:any = cityList[index];
      if(item && menu.city){
        if(Number(item.id) == Number(menu.city)){
          city.value = item.name
          countyList = item.children
        }
      }
    }

     for (let index = 0; index < countyList.length; index++) {
      let item:any = countyList[index];
      if(item && menu.county){
        if(Number(item.id) == Number(menu.county)){
          county.value = item.name
        }
      }
    }
  },
});

const addVisible = ref(false);
const getCascaderOptions = () => {
  return useBaseData.regions;
};
//console.log();

const formData = ref<SupplyInfo>({
  supplyName:'',
  managerName:'',
  managerPhone:'',
  city:'',
  county:'',
  province:'',
  address:'',
  addressIds:{}
});
onMounted(() => {
});
</script>
<style lang="scss" scoped>
.tree-box {
  border: 2px solid #e1e1e1;
  height: 300px;
  width: 451px;
  margin-top: 10px;
  overflow-y: auto;
}
.details{
  display: flex;
  .details_title{
      width: 82px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: rgba(0,0,0,0.6);
      line-height: 40px;
      text-align: left;
      font-style: normal;
      text-transform: none;
  }
  .details_text{
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 13px;
    line-height: 40px;
    color: rgba(0,0,0,0.9);
    flex:1;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
</style>
